<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>淘宝搜索</title>
  <!-- import CSS -->
  <link rel="stylesheet"  href="css/shaixuan.css">
  <link rel="stylesheet" href="css/eui.css">
  <style>
    .img_card:hover {
      border: 1px solid red;
    }

    .top {
      width: 1070px;
      height: 44px;
      margin: 0 auto;
    }

    .top img {
      display: block;
      width: 105px;
      height: 43px;
      float: left;
    }

    .search {
      width: 978px;
      height: 40px;
      margin-left: 154px;
    }

    .top div input {
      display: block;
      height: 29px;
      width: 660px;
      float: left;
      margin: 4.5px 0 0 0;
      border: 2px solid orangered;
    }

    .top a {
      width: 80px;
      height: 35px;
      float: left;
      border: 0;
      margin: 4.5px 0 0 0;
      background-color: orangered;
      display: block;
      text-decoration: none;
      text-align: center;
      line-height: 35px;
      font-size: 17px;
      color: white;
    }

    .top div input {
      font-size: 14px;
      padding-left: 5px;
    }


    .bottom {
      width: 1070px;
      height: 57px;
      margin: 30px 0 0 600px;
    }

    .first {
      background-color: orangered;
      color: white;
    }

    .bottom a {
      float: left;
      width: 35px;
      height: 35px;
      display: block;
      color: #404040;
      font-size: 14px;
      border: 1px solid lightgray;
      text-align: center;
      line-height: 35px;
      text-decoration: none;

    }

    .bottom input {
      width: 37px;
      height: 23px;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header>Header</el-header>
    <el-main>
      <!--搜索框-->
      <div class="top">
        <img src="./imgs/logo-so-420-172.png" alt="">
        <div class="search">
          <a href="" style="margin-left: 100px">宝贝</a>
          <input type="text" value="手机">
          <a href="">搜 索</a>
        </div>
      </div>
      <!--筛选列-->

      <div class="product-list-main">
        <ul class="biaotou">
          <li>
            <dt><span>所有宝贝</span></dt>
          </li>
          <li class="line"></li>
        </ul>

        <ul class="product-list-wrap" id="ul_select_1">

          <li class="select-list">
            <dl id="select1" class="dl clearfix">
              <dt>品牌：</dt>
              <div class="fl">
                <dd><span>Huawei/华为</span></dd>
                <dd><span>Samsung/三星</span></dd>
                <dd><span>MIUI/小米</span></dd>
                <dd><span>Philips/飞利浦</span></dd>
                <dd><span>纽曼</span></dd>
                <dd><span>vivo</span></dd>
                <dd><span>OPPO</span></dd>
                <dd><span>Lenovo/联想</span></dd>
                <dd><span>Apple/苹果</span></dd>
              </div>
            </dl>
          </li>
          <li class="select-list">
            <dl id="select2" class="dl clearfix">
              <dt>手机类型</dt>
              <div class="fl">
                <dd><span>智能手机</span></dd>
                <dd><span>时尚手机</span></dd>
                <dd><span>拍照手机</span></dd>
                <dd><span>4G手机</span></dd>
                <dd><span>音乐手机</span></dd>
                <dd><span>商务手机</span></dd>
                <dd><span>女性手机</span></dd>
                <dd><span>老人手机</span></dd>
                <dd><span>电视手机</span></dd>
                <dd><span>儿童手机</span></dd>
                <dd><span>3G手机</span></dd>
              </div>
            </dl>
          </li>
          <li class="select-list">
            <dl id="select3" class="dl clearfix">
              <dt>机身内存ROM</dt>
              <div class="fl">
                <dd><span>256G</span></dd>
                <dd><span>128G</span></dd>
                <dd><span>512G</span></dd>
                <dd><span>64G</span></dd>
                <dd><span>32G</span></dd>
              </div>
            </dl>
          </li>
          <li class="select-list">
            <dl id="select4" class="dl clearfix">
              <dt>附加功能</dt>
              <div class="fl">
                <dd><span>手电筒</span></dd>
                <dd><span href="#">重力感应</span></dd>
                <dd><span href="#">收音机</span></dd>
                <dd><span href="#">蓝牙</span></dd>
                <dd><span href="#">光线感应</span></dd>
                <dd><span href="#">WIFI</span></dd>
              </div>
            </dl>
          </li>
          <li class="select-list">
            <dl id="select5" class="dl clearfix">
              <dt>筛选条件：</dt>
              <div class="fl">
                <dd> <el-dropdown>
          <span class="el-dropdown-link">
            运行内存<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>512M</el-dropdown-item>
                    <el-dropdown-item>1G</el-dropdown-item>
                    <el-dropdown-item>3G</el-dropdown-item>
                    <el-dropdown-item>2G</el-dropdown-item>
                    <el-dropdown-item>4G</el-dropdown-item>

                  </el-dropdown-menu>
                </el-dropdown></dd><dd> <el-dropdown>
          <span class="el-dropdown-link">
            像素<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>800W</el-dropdown-item>
                    <el-dropdown-item>2000W</el-dropdown-item>
                    <el-dropdown-item>1600W</el-dropdown-item>
                    <el-dropdown-item>无摄像头</el-dropdown-item>


                  </el-dropdown-menu>
                </el-dropdown></dd>

              </div>
            </dl>
          </li>

        </ul>
        <ul class="product-list-wrap" id="ul_select_2">
          <li class="select-list">
            <dl id="select6" class="dl clearfix"></dl>
            <dt style="color: orangered">综合排序</dt>
            <div class="fl">
              <dd><span>
                <a class="a" href="http://www.baidu.com"  >销量</a>
              </span></dd>
              <dd><span>
                <a class="a" href="http://www.baidu.com">信用</a>
              </span></dd>
              <dd> <el-dropdown><span class="el-dropdown-link">
                价格
                <i class="el-icon-arrow-down el-icon--right"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>价格由低到高</el-dropdown-item>
                  <el-dropdown-item>价格由高到低</el-dropdown-item>
                  <el-dropdown-item>总价由低到高</el-dropdown-item>
                  <el-dropdown-item>总价由高到低</el-dropdown-item>

                </el-dropdown-menu>
              </span></el-dropdown></dd>
              <dd><span><input type="text" placeholder="¥" style="width: 50px"></span></dd>
              <dd><span>-</span></dd>
              <dd><span><input type="text" placeholder="¥" style="width: 50px"></span></dd>
              <dd><span><input type="submit" value="确定"/></span></dd>
            </div>
            </dl>
          </li>
          <li class="select-list">
            <dd><span><template>
            <input type="checkbox"  value="b" id="r1"><label for="r1">包邮   </label>
            </template></span></dd>
            <dd><span><template>
            <input type="checkbox"  value="b" id="r2"><label for="r2">天猫   </label>
            </template></span></dd>
            <dd><span><template>
            <input type="checkbox"  value="b" id="r3"><label for="r3">赠送退货运费险   </label>
            </template></span></dd>
            <dd><span><template>
            <input type="checkbox"  value="b" id="r4"><label for="r4">公益</label>
            </template></span></dd>
            <dd><span><template>
            <input type="checkbox"  value="b" id="r5"><label for="r5">新品   </label>
            </template></span></dd>
            <dd><span><template>
            <input type="checkbox"  value="b" id="r6"><label for="r6">正品保障   </label>
            </template></span></dd>
          </li>
        </ul>
      </div>
      <!--商品列-->
      <div>
        <el-main>
          <div>
            <el-row>
              <el-col :span="3"></el-col>
              <el-col :span="16">
                <div></div>
                <div></div>
              </el-col>
              <el-col :span="5"></el-col>
            </el-row>
          </div>
          <div style="width: 1010px ;margin: 0 auto">
            <div style="width: 250px;height: 320px;margin: 0 auto;display:inline-block"
                 v-for="i in 44">
              <el-card :body-style="{padding: '7px 7px 0 7px'} " shadow="hover" class="img_card">
                <!--商品图片-->
                <el-image
                        style="height: 200px ; width: 180px; border-radius: 12px"
                        :src="phone_infos[i].mainPic"
                        fit="cover "></el-image>
                <!--商品价格与付款人数-->
                <div>
                  <div style="color: #F40">¥{{phone_infos[i].actualPrice}}
                    <span style="font-size: 12px;float: right ;color: #888">
                                            {{phone_infos[i].monthSales}}人付款
                                        </span>
                  </div>
                </div>
                <!--商品标题-->
                <div class="title"
                     style="margin-top: 9px;height: 44px;width: 200px ;font-size: 16px;overflow:hidden;">
                  {{phone_infos[i].title}}
                </div>
                <!--商品店铺名字-->
                <div>
                                    <span style="margin-top: 9px;height: 44px;width: 200px ;font-size: 12px;overflow:hidden; color: #888">
                                        <i class="el-icon-s-unfold"></i> {{phone_infos[i].shopName}}
                                    </span>
                </div>
                <!--天猫超市与阿里巴巴-->
                <div style="padding: 0 10px 15px 6px ;margin: 10px 0">
                  <img src="imgs/tianmao.png" style="width: 16px;height: 16px;float: left">
                  <img src="imgs/aliwangwang.png" style="width: 16px;height: 16px;float: right">
                </div>

              </el-card>
            </div>
          </div>
        </el-main>
      </div>
      <!--底部选择分页-->
      <div class="bottom">
        <a href="" style="width: 70px;">上一页</a>
        <a href="" class="first">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a style="border:0;">...</a>
        <a href="">100</a>
        <a href="" style="width: 70px;">上一页</a>
        <a style="width: 65px;border: 0;"> 共100页,</a>
        <a style="width: 100px;border: 0;"> 到第 <input type="text" value="2"> 页 </a>
        <a style="width: 45px;height: 23px;margin-top: 6px;line-height: 23px;" href="">确定</a>
      </div>
    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/selectlist.js"></script>
<script src="js/data.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        phone_infos: phone_info_data
      }
    }
  })
</script>
</html>